<template>
  <view
    class="page-nav"
    :class="pageNavClass"
    :style="navStyle"
  >
    <view
      class="page-nav-navbar"
      :style="navBarStyle"
    >
      <!-- 状态栏 -->
      <view
        class="page-nav-statusbar"
        :style="{height: statusBarHeight + 'px'}"
      />
      <!-- 标题栏 -->
      <view
        class="page-nav-titlebar"
        :style="{height: titleBarHeight + 'px'}"
      >
        <!-- 后退键 -->
        <view
          v-if="backVisible && !homeVisible"
          class="page-nav-button page-nav-button-back"
          @click="backClick()"
        >
          <van-icon name="arrow-left" />
        </view>
        <!-- home键 -->
        <view
          v-if="homeVisible"
          class="page-nav-button page-nav-button-home"
          @click="homeClick()"
        >
          <cover-image
            class="home-image"
            src="/static/icons/home.png"
          />
        </view>
        <!-- 标题 -->
        <view
          v-if="titleText"
          class="page-nav-titlebar__title"
          :style="titleTextStyle"
        >{{showTitle?title:''}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { formatStyles } from '@/utils'
export default {
  props: {
    // 导航栏背景色
    bgcolor: String,
    // 标题颜色
    titleColor: {
      type: String,
      default: '#000000'
    },
    // 标题文字
    title: String,
    // 标题文字
    toggleTitle: String,
    // 是否显示后退按钮
    backVisible: {
      type: Boolean,
      default: false
    },
    // home按钮的路径
    homePath: {
      type: String,
      default: '/pages/index/main'
    },
    backPath: {
      type: String,
      default: '/pages/index/main'
    },
    homeIshide: {
      type: Boolean,
      default: true
    },
    useToggle: {
      type: Boolean,
      default: false
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    fixPlace: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      statusBarHeight: 20, // 状态栏高度
      titleBarHeight: 40, // 标题栏高度
      navBarHeight: 60, // 导航栏总高度
      titleThemeColor: '',
      platform: '',
      system: '',
      panelBackground: '',
      titleText: '',
      opacity: 0,
      homeVisible: false,
      isFromShare: false,
      //
      theme: 'white',
      systemData: {},
      menuButtonObject: {}
    }
  },
  onLoad (options) {
    console.group('TopPanel')
    console.log(options)
    console.log('MenuButtonObject in the store app:', this.$store.state.app.menuButton)
    this.menuButtonObject = this.$store.state.app.menuButton
    this.systemData = this.$store.state.app.device
    // this.menuButtonObject = mpvue.getStorageSync('menuButtonObject')
    // this.systemData = mpvue.getStorageSync('systemData')
    this.statusBarHeight = this.systemData.statusBarHeight
    // let space = this.menuButtonObject.top - this.statusBarHeight
    // this.titleBarHeight = space * 2 + this.menuButtonObject.height + this.systemData.pixelRatio * this.systemData.screenWidth / 750
    // this.titleBarHeight = space + this.menuButtonObject.height + 8
    let platformReg = /ios/i
    if (platformReg.test(this.systemData.platform)) {
      this.titleBarHeight = 44
    } else {
      this.titleBarHeight = 48
    }
    this.navBarHeight = this.statusBarHeight + this.titleBarHeight
    if (options.from === 'share') {
      console.log('是分享进入')
      this.isFromShare = true
    }
    this.opacity = 0
    this.toggleTheme()
    console.groupEnd('TopPanel')
  },
  watch: {
    opacity (v, ov) {
      // this.toggleTheme()
      this.theme = v > 0 ? 'black' : 'white'
    },
    theme () {
      // this.toggleTheme()
      this.setNavigationBarColor()
    },
    navBarHeight (v, ov) {
      this.$emit('resize', v)
    }
  },
  computed: {
    pageNavClass () {
      let classes = []
      if (this.useToggle && !this.opacity) {
        classes.push('page-nav-white')
      }
      return classes
    },
    showBackHomeButton () {
      return false
    },
    navStyle () {
      let styles = {}
      if (this.bgcolor) {
        styles.backgroundColor = this.bgcolor
      }
      if (this.fixPlace) {
        styles.height = this.statusBarHeight + this.titleBarHeight + 'px'
      }
      return formatStyles(styles)
    },
    navBarStyle () {
      return `opacity: ${this.opacity}`
    },
    navBackgroundColor () {
      return 'rgba(255,255,255,' + this.opacity + ')'
    },
    backBtnStyle () {
      if (this.useToggle && !this.opacity) {
        return 'color: #fff;'
      } else {
        return ''
      }
    },
    titleTextStyle () {
      if (this.useToggle) {
        if (this.opacity) {
          return 'color: ' + this.titleColor
        } else {
          if (this.showTitle) {
            return 'color: #fff;'
          } else {
            return 'color: ' + this.titleColor
          }
        }
      } else {
        return 'color: ' + this.titleColor
      }
    }
  },
  mounted () {
    if (this.showTitle || !this.useToggle) {
      this.titleText = this.title
    }
    if (this.isFromShare || !this.homeIshide) {
      this.homeVisible = true
    }
    this.setNavigationBarColor('black')
    // this.toggleTheme()
  },
  methods: {
    backClick () {
      wx.navigateBack({
        delta: 1
      })
    },
    homeClick () {
      wx.reLaunch({
        url: this.homePath
      })
    },
    toggleTheme () {
      if (!this.useToggle) {
        return
      }
      if (this.opacity) {
        // wx.setNavigationBarColor({
        //   frontColor: '#000000',
        //   backgroundColor: '#ffffff'
        // })
        this.setNavigationBarColor('black')
        this.titleText = this.title
      } else {
        this.setNavigationBarColor('white')
        // wx.setNavigationBarColor({
        //   frontColor: '#ffffff',
        //   backgroundColor: '#ffffff',
        //   navigationBarTextStyle: 'white'
        // })
        if (!this.showTitle) {
          this.titleText = ''
        }
      }
    },
    setNavigationBarColor () {
      wx.setNavigationBarColor({
        frontColor: this.theme === 'black' ? '#000000' : '#ffffff',
        backgroundColor: '#ffffff'
      })
    }
  },
  /**
   * 监听用户滑动页面事件--返回页面在垂直方向已滚动的距离（单位px）
   */
  onPageScroll (e) {
    if (this.useToggle) {
      if (e.scrollTop >= this.navBarHeight) {
        this.opacity = 1
        // this.setNavigationBarColor('black')
      } else if (e.scrollTop > 0) {
        this.opacity = parseFloat(e.scrollTop / this.navBarHeight)
        // this.setNavigationBarColor('black')
      } else {
        this.opacity = 0
        // this.setNavigationBarColor('white')
      }
    }
  }
}
</script>